<!--
 * @Date: 2024-09-05 15:41:57
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-11-04 14:40:34
 * @Description: 表格工具栏设置
-->
<template>
  <div class="widget-config-setting">
    <div class="setting-name">工具栏配置</div>
    <div class="setting-body">
      <el-form-item label="是否启用">
        <el-switch v-model="toolbarConfig.enabled"></el-switch>
      </el-form-item>
      <template v-if="toolbarConfig.enabled">
        <el-form-item label="允许最大化">
          <el-switch v-model="toolbarConfig.zoom"></el-switch>
        </el-form-item>
        <el-form-item label="显示刷新按钮">
          <el-switch v-model="toolbarConfig.refresh"></el-switch>
        </el-form-item>
        <el-form-item label="功能按钮配置">
          <el-button type="primary" round plain @click="onToolButtonsEdit">编辑</el-button>
        </el-form-item>
      </template>
    </div>
    <div class="setting-body" v-show="toolbarConfig.enabled">
      <div class="setting-body-title">金额单位查询</div>
      <el-form-item label="是否启用">
        <el-switch v-model="searchStore.dwSelect.enabled"></el-switch>
      </el-form-item>
      <el-form-item label="自动查询">
        <el-switch v-model="searchStore.dwSelect.autoLoad"></el-switch>
      </el-form-item>
    </div>
    <div class="setting-body" v-show="toolbarConfig.enabled">
      <div class="setting-body-title">模糊搜索查询</div>
      <el-form-item label="是否启用">
        <el-switch v-model="searchStore.mhcxInput.enabled"></el-switch>
      </el-form-item>
      <el-form-item label="自动查询">
        <el-switch v-model="searchStore.mhcxInput.autoLoad"></el-switch>
      </el-form-item>
      <el-form-item label="允许清空">
        <el-switch v-model="searchStore.mhcxInput.clearable"></el-switch>
      </el-form-item>
      <el-form-item label="占位内容">
        <el-input v-model="searchStore.mhcxInput.placeholder" placeholder="请输入占位内容" />
      </el-form-item>
      <el-form-item label="控件宽度">
        <el-input-number style="width: 100%;" v-model="searchStore.mhcxInput.width" />
      </el-form-item>
    </div>
    <ToolbarButtonsDialog ref="toolBtnsRef" @confirm="onToolButtonConfirm"/>
  </div>
</template>

<script setup name="toolbarConfig-editor">

import ToolbarButtonsDialog from '@/components/dialogs/src/table-widget/ToolbarButtonsDialog.vue'

import { ref, reactive, computed } from 'vue';

const props = defineProps({
  // 设计器信息
  designer: { type: Object },
  // 组件选项信息
  optionModel: { type: Object },
  // 当前选中的组件
  selectedWidget: { type: Object },
});

// 默认配置
const defConfig = {
  zoom: true,
  enabled: true,
  refresh: true,
}
// 表格的配置
const toolbarConfig = computed(() => {
  if (!props.optionModel.toolbarConfig) {
    props.optionModel.toolbarConfig = defConfig
  }
  return props.optionModel.toolbarConfig
})

// 查询默认配置
const cxDefConfig = {
  dwSelect: {
    enabled: false,
    autoLoad: true,
  },
  mhcxInput: {
    width: 200,
    enabled: false,
    autoLoad: true,
    clearable: true,
    placeholder: '',
  }
}
// 表格查询配置
const searchStore = computed(() => {
  const { searchConfig } = props.optionModel
  if (!searchConfig) {
    props.optionModel.searchConfig = cxDefConfig
  }
  return props.optionModel.searchConfig
})

const toolBtnsRef = ref()
const onToolButtonsEdit = () => {
  toolBtnsRef.value.handleOpen(toolbarConfig.value['buttons'])
}
const onToolButtonConfirm = (data) => {
  props.optionModel.toolbarConfig['buttons'] = data
}
</script>

<style lang="scss" scoped>
</style>
